<template>
	<div class="User_Recommend">
		<div class="User_Recommend_top">
			<img src="../../../../public/grimg/tj_right.png" />
			<h3>精选推荐</h3>
			<img src="../../../../public/grimg/tj_left.png" />
		</div>
		<div class="User_Recommend_bottom">
			<ol>
				<li v-for="item in list" :key="item.id">
					<p>
						<img :src="item.img"/>
					</p>
					<aside>
						<span>{{item.title}}</span>
						<p>{{item.txt}}</p>
						<label>￥{{item.price}}</label><a>起</a>
						<em>{{item.time}}</em>
					</aside>
				</li>
			</ol>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'User_Recommend',
		data(){
			return{
				list:[
					{id:1,img:'grimg/tj_1.jpg',title:'休闲度假 | 郑州出发',txt:'[无限风光•老君山]12-2月，赏景圣地老君山&中岳嵩山，千年古刹少林寺，北方溶洞鸡冠洞，伏牛十里画屏，看少林功夫，日出云海星空（4日深度游，河南赏风光）',price:'1580',time:'4天3晚'},
					{id:2,img:'grimg/tj_2.jpg',title:'休闲度假 | 北京出发',txt:'[冰雪坝上 • 精致休闲]12-2月 冰雪童话世界 温泉酒店up/小地形越野穿越/乐享雪地火锅/感受塞北年味/畅玩冰雪乐园 古北水镇/坝上草原全景6日激情冰雪之旅',price:'3150',time:'6天5晚'},
					{id:3,img:'grimg/tj_3.jpg',title:'休闲度假 | 沈阳出发',txt:'[冰雪阿尔山]12-2月沈阳，阿尔山国家森林公园，梦幻不冻河，查干湖冬捕，白狼镇雾凇长廊，鹿园，兴安敖包，乘坐雪国列车+打卡网红火车站+《亲爱的客栈》拍摄地，小众5日游',price:'3180',time:'5天4晚'},
					{id:4,img:'grimg/tj_4.jpg',title:'休闲度假 | 成都出发',txt:'[冰雪九寨环线]12-2月，避开旺季人群纷扰，邂逅冬日静谧九寨黄龙，撒欢毕棚沟，登达古冰川，两晚轻享九寨沟五星度假体验，打卡抖音同款华美达温泉酒店，冬游川西7日深度游！',price:'4080',time:'7天6晚'},
					{id:5,img:'grimg/tj_5.jpg',title:'美景探索 | 乌鲁木齐',txt:'[冰雪新疆]12-2月：雪国喀纳斯-水墨禾木-赛里木湖（蓝冰、冰泡）-人文伊宁-伊犁天鹅泉-独山子大峡谷-将军山滑雪场，品牌越野车/中巴考斯特+火车软卧，冰雪9日深度纯玩',price:'5580',time:'9天8晚'},
					{id:6,img:'grimg/tj_6.jpg',title:'美景探索 | 哈尔滨出发',txt:'[东北冰雪休闲]11-2月哈尔滨（冰雪首推路线），二浪河东北年味、雪乡尊享雪景房、长白山天池、镜泊湖冰瀑+冬捕、雾凇岛、雪地摩托+滑雪泡温泉+二人转+雪地烟花，年味7日',price:'3190',time:'7天6晚'},
					{id:7,img:'grimg/tj_7.jpg',title:'户外游行 | 宜昌出发',txt:'[三峡徒步]12月红叶季徒步圣地！漫步长江三峡，船行+徒步，从上帝视角俯瞰巴楚风韵，小众三峡流域轻装徒步穿越，避开人流，6日三峡秋景穿越之旅！',price:'2980',time:'6天5晚'},
					{id:8,img:'grimg/tj_8.jpg',title:'美景探索 | 南宁出发',txt:'[田园靖西]11-3月暖冬季：南宁-通灵大峡谷-渠洋湖-靖西鹅泉-德天瀑布-明仕田园，4天3夜深度之旅！（批批入住明仕山庄）',price:'2680',time:'4天3晚'},
					{id:9,img:'grimg/tj_9.jpg',title:'摄影游行 | 宜昌出发',txt:'[三峡秋摄]11月秋色三峡红叶季火热！摄长江三峡秋景精华，三峡人家-大面山-巫山神女湾-夔门，从雄伟到柔情，7日摄影创作团！',price:'3380',time:'7天6晚'},
				]
			}
		}
	}
</script>

<style scoped>
	.User_Recommend{
		width: 100%;
		height: 70rem;
		background-color: #f5f5f5;
	}
	.User_Recommend .User_Recommend_top{
		display: flex;
		justify-content: center;
		align-items: center;
		height:4rem;
		background-color: #f5f5f5;
	}
	.User_Recommend .User_Recommend_top img{
		width: 2rem;
	}
	.User_Recommend .User_Recommend_top h3{
		display: inline-block;
		font-weight: bolder;
	}
	.User_Recommend .User_Recommend_bottom{
		height: 10rem;
		width: 100%;
	}
	.User_Recommend .User_Recommend_bottom li{
		background-color: #f5f5f5;
		width: 50%;
		float: left;
	}
	.User_Recommend .User_Recommend_bottom p{
		text-align: center;
	}
	.User_Recommend .User_Recommend_bottom li img{
		text-align: center;
		width: 96%;
		height: 6rem;
		
	}
	.User_Recommend .User_Recommend_bottom aside{
		margin: 0 auto;
		width: 96%;
		position: relative;
		height: 6rem;

	}
	.User_Recommend .User_Recommend_bottom aside span{
		width: 9rem;
		margin-left: 0.5rem;
		position: absolute;
		left: -0.4rem;
		bottom: 10.8rem;
		background-color: rgba(0,0,0,0.6);
		display: block;
		text-align: center;
		color: white;
		border-radius: 0 0.4rem 0.4rem 0;
		font-size: 0.5rem;
		
	}
	.User_Recommend .User_Recommend_bottom aside p{
		display: -webkit-box;
		-webkit-line-clamp: 2;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
		overflow: hidden;
		padding-top: 0.2rem;
	}
	
	.User_Recommend .User_Recommend_bottom aside label{
		margin-top: 1rem;
		display: inline-block;
		color: #FF7110;
	}
	.User_Recommend .User_Recommend_bottom aside a{
		color: #808080;
		font-size: 0.5rem;
	}
	.User_Recommend .User_Recommend_bottom aside em{
		float: right;
		margin-top: 1.2rem;
		color: #808080;
		font-size: 0.5rem;
	}
</style>
